<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments/head"></head>
<body>
<header th:insert="fragments/header"></header>

<main>
    <div class="section no-pad-bot" id="index-banner">
        <div class="container">
            <h1 class="header center">我的课程</h1>
            <div class="row center">
                <h5 class="header col s12 light">您已选修的课程</h5>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col s12 cards-container">
                <div th:if="${#lists.isEmpty(matriculas)}" class="center">
                    <h4>您还没有选修任何课程</h4>
                    <a th:href="@{/cursos}" class="waves-effect waves-light btn-large">
                        <i class="material-icons left">search</i>
                        浏览课程
                    </a>
                </div>

                <div class="card hoverable" th:each="matricula : ${matriculas}">
                    <div class="card-image">
                        <img th:src="${matricula.curso.imgurl}" alt="课程封面">
                        <a th:href="|/cursos/${matricula.curso.id_curso}|"
                           class="btn-floating halfway-fab waves-effect waves-light red">
                            <i class="material-icons">chevron_right</i>
                        </a>
                    </div>
                    <div class="card-content">
                        <span class="card-title" th:text="${matricula.curso.nomCurso}">课程名称</span>
                        <p th:text="${matricula.curso.descripcionCurso}">课程描述</p>
                        <p class="grey-text">
                            <i class="material-icons tiny">access_time</i>
                            选课时间：<span th:text="${#temporals.format(matricula.fecha_matricula, 'yyyy-MM-dd')}"></span>
                        </p>
                    </div>
                    <div class="card-action">
                        <a th:href="${matricula.curso.urlCurso}" target="_blank" class="btn waves-effect waves-light">
                            <i class="material-icons left">play_circle_filled</i>
                            进入学习
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<footer class="page-footer teal" th:insert="fragments/footer"></footer>
<!--  Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="/js/materialize.js"></script>
<script src="/js/init.js"></script>
</body>
</html>